<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>主页面</h1>
    <router-view></router-view>
</div>

<script>
    let first = {
        template: `
        <div>
        <h2>这是组件1</h2>
        <router-link to="/second/?id=2&name=森怕森透">点击访问组件2</router-link>
</div>
        `
    }

    let second = {
        template: `
        <div>
        <h2>这是组件2</h2>
        这是组件1传递过来的id：{{$route.query.id}} <br>
        这是组件1传递过来的用户名：{{$route.query.name}} <br>
</div>
        `,
    }

    let myRouter = new VueRouter({
        routes: [
            {path: '/first', component: first},
            {path: '/second', component: second},
            {path: '/', redirect: '/first'},
        ]
    })

    new Vue({
        el: '#app',
        data: {},
        router: myRouter,
    })
</script>
</body>
</html>